<template>
  <div class="app-container home">
    <div style="margin-bottom: 15px">
      <span style="margin-right: 10px">
        <el-tooltip class="item" effect="dark" content="数据模式" placement="bottom">
          <i
            class="el-icon-menu home-type-btn"
            :style="{ color: homeType == '数据模式' ? '#29c093' : '#1a1a1a' }"
            @click="toClickHomeType('数据模式')"
          ></i>
        </el-tooltip>
      </span>
      <span>
        <el-tooltip class="item" effect="dark" content="地图模式" placement="bottom">
          <i
            class="el-icon-map-location home-type-btn"
            :style="{ color: homeType == '地图模式' ? '#29c093' : '#1a1a1a' }"
            @click="toClickHomeType('地图模式')"
          ></i>
        </el-tooltip>
      </span>
    </div>
    <div style="width: 100%; height: 95%" v-show="homeType == '数据模式'">
      <div class="box-A">
        <div class="box-A-card" style="margin-right: 1vw">
          <div class="box-A-title" style="display: flex">
            <span class="title-text" style="width: 150px">无线设备信息</span>
            <div class="title-right">
              <div v-for="(legend, index) in basicInfoLegend" :key="index" class="title-right-item">
                <div class="item-legend" :style="{ background: legend.color }" />
                <div :style="{ color: legend.color }">{{ legend.name }}</div>
              </div>
            </div>
          </div>
          <div class="box-A-content">
            <div class="A-left">
              <div id="keyA" style="height: 100%" />
            </div>
            <div class="A-right">
              <div v-for="(itemData, index) in basicInfoDataList" :key="index" class="A-right-item">
                <span class="A-right-item-btn">
                  <el-tag
                    effect="plain"
                    class="btn-tag"
                    :style="{
                      'border-color': itemData.color,
                      color: itemData.color
                    }"
                  >
                    {{ itemData.name }}
                  </el-tag>
                </span>
                <span class="A-right-item-value" :style="{ color: itemData.color }">{{ itemData.value }}</span>
                <span
                  >占比<span style="margin-left: 3px">{{
                    ChangeDecimalToPercentage(itemData.value / basicInfoData['总数'])
                  }}</span></span
                >
              </div>
            </div>
          </div>
        </div>

        <div class="box-A-card">
          <div class="box-A-title">
            <span class="title-text">传统消防设备信息</span>
          </div>
          <div class="box-A-right-content">
            <div
              v-for="(abnormalCondition, index) in quantityStatisticsList"
              :key="index"
              class="box-A-right-content-item"
            >
              <img :src="abnormalCondition.img" />
              <div class="value-label" v-if="abnormalCondition.label != ''">
                <span :class="['value-text', abnormalCondition.color]">
                  <count-to :start-val="0" :end-val="abnormalCondition.value" :duration="3000" separator="" /><span
                    class="unit-text"
                    >个</span
                  >
                </span>
                <span class="label-text"> {{ abnormalCondition.label }} </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="box-B">
        <div class="box-B-card" style="margin-right: 1vw">
          <div class="box-A-title">
            <span class="title-text">最近预警事件</span>
            <span style="margin-left: 10px; font-size: 10px; color: #d1d1d1">最近预警事件10条</span>
          </div>
          <div class="box-B-content" style="padding: 15px 20px">
            <el-table
              :data="earlyWarningEventList"
              stripe
              style="width: 100%; height: 100%"
              class="earlyWarningEventTable"
            >
              <el-table-column prop="alertTime" label="告警时间" width="150" />
              <el-table-column prop="deviceName" label="名称" />
              <el-table-column prop="deviceTypeStr" label="类型" width="150" />
              <el-table-column prop="solveStatus" label="当前状态" width="120">
                <template slot-scope="{ row }">
                  <el-tag size="small" :style="row.solveStatus | constantKeyTagStyleObj('HANDLE_STATUS')">
                    {{ row.solveStatus | constantKeyValue('HANDLE_STATUS') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="deviceStatus" label="报警类型" width="120">
                <template slot-scope="{ row }">
                  <el-tag size="small" :style="row.deviceStatus | constantKeyTagStyleObj('WARNING_TYPE')">
                    {{ row.deviceStatus | constantKeyValue('WARNING_TYPE') }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="box-B-card">
          <div class="box-A-title" style="margin-top: -9px; display: flex">
            <span class="title-text" style="flex: 1">告警处理统计</span>
            <div style="display: flex; width: 160px">
              <span style="flex: 1">
                <el-button
                  size="small"
                  type="primary"
                  :plain="alarmStatisticsType == '今日告警' ? false : true"
                  round
                  class="btn-alarms-statistics"
                  @click="toClickType('今日告警')"
                >
                  今日告警
                </el-button>
              </span>
              <span style="flex: 1">
                <el-button
                  size="small"
                  type="primary"
                  :plain="alarmStatisticsType == '告警统计' ? false : true"
                  round
                  class="btn-alarms-statistics"
                  @click="toClickType('告警统计')"
                >
                  告警统计
                </el-button>
              </span>
            </div>
          </div>

          <div class="box-B-content">
            <div class="B-right-chart">
              <div id="keyB" style="height: 100%" />
            </div>
            <div class="B-right-describe">
              <div class="B-right-describe-item" style="border-left-color: #f46e65">
                <div class="B-right-describe-item-value">
                  <span>{{ alarmStatisticsObj.gCount1 }}</span>
                </div>
                <div class="B-right-describe-item-label">
                  <span>未派单告警数</span>
                </div>
              </div>
              <div class="B-right-describe-item" style="border-left-color: #4684dc">
                <div class="B-right-describe-item-value">
                  <span>{{ alarmStatisticsObj.gCount2 }}</span>
                </div>
                <div class="B-right-describe-item-label">
                  <span>待处理告警数</span>
                </div>
              </div>
              <div class="B-right-describe-item" style="border-left-color: #4cb06a">
                <div class="B-right-describe-item-value">
                  <span>{{ alarmStatisticsObj.gCount3 }}</span>
                </div>
                <div class="B-right-describe-item-label">
                  <span>已处理告警数</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="box-C">
        <div class="box-C-card" style="margin-right: 1vw">
          <div class="box-A-title" style="display: flex">
            <span class="title-text" style="width: 150px">设备记录</span>
            <div class="title-right">
              <div v-for="(legend, index) in basicInfoLegend" :key="index" class="title-right-item">
                <div class="item-legend" :style="{ background: legend.color }" />
                <div :style="{ color: legend.color }">{{ legend.name }}</div>
              </div>
            </div>
          </div>
          <div class="box-C-content">
            <div v-for="(deviceRecordChart, index) in deviceRecordChartList" :key="index" style="height: 100%; flex: 1">
              <div :id="deviceRecordChart.id" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>

        <div class="box-C-card">
          <div class="box-A-title">
            <span class="title-text">报警趋势</span>
            <span style="margin-left: 10px; font-size: 10px; color: #d1d1d1">最近10天</span>
          </div>
          <div class="box-C-content">
            <div id="keyD" style="height: 100%; width: 100%" />
          </div>
        </div>
      </div>
    </div>
    <div v-if="homeType == '地图模式'">
      <gaode-map v-if="homeType == '地图模式'" />
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import dashboardManageApi from '@/api/dashboard-manage'
import deviceManageApi from '@/api/device-manage'
import GaodeMap from '../gaode-map/index'

export default {
  name: 'Dashboard',
  components: {
    CountTo,
    GaodeMap
  },
  data() {
    return {
      homeType: '数据模式',
      basicInfoLegend: [
        { name: '告警', color: '#f34a4a' },
        { name: '故障', color: '#ff9836' },
        { name: '隔离', color: '#6d5eac' },
        { name: '正常', color: '#29c093' },
        { name: '离线', color: '#b6b6b6' }
        // { name: '未激活', color: '#dfdfdf' },
      ],
      basicInfoData: {},
      basicInfoDataList: [],
      quantityStatisticsList: [
        {
          color: 'value-text-color-A',
          img: this.getImgSrc('消防主机.png'),
          value: 0,
          label: '消防主机'
        },
        {
          color: 'value-text-color-C',
          img: this.getImgSrc('用户传输装置.png'),
          value: 0,
          label: '传输设备'
        },
        {
          color: '',
          img: '',
          value: null,
          label: ''
        },
        {
          color: 'value-text-color-A',
          img: this.getImgSrc('传统消防设备.png'),
          value: 0,
          label: '网关'
        },

        {
          color: 'value-text-color-C',
          img: this.getImgSrc('探点设备.png'),
          value: 0,
          label: '有线探点'
        },
        // {
        //   color: 'value-text-color-B',
        //   img: this.getImgSrc('故障.png'),
        //   value: 0,
        //   label: '故障数量'
        // },
        // {
        //   color: 'value-text-color-C',
        //   img: this.getImgSrc('探点设备.png'),
        //   value: 123,
        //   label: '探点设备数',
        // },
        {
          color: '',
          img: '',
          value: null,
          label: ''
        },
        {
          color: '',
          img: '',
          value: null,
          label: ''
        }
      ],

      deviceDictionaries: [],
      earlyWarningEventList: [],

      alarmStatisticsType: '今日告警',
      alarmStatisticsData: [],
      alarmStatisticsObj: {},

      deviceRecordData: [],
      deviceRecordChartList: [],

      alarmTrendData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    toClickHomeType(text) {
      this.homeType = text
      if (this.homeType == '数据模式') {
        this.getData()
      }
    },
    getData() {
      this.getBasicInfoData() // 基本信息
      this.getQuantityDeviceData() // 传统消防设备

      this.getDictValueAttr() // 设备类型
      this.getAlarmStatisticsData() // 告警统计

      this.getDeviceRecordData() // 设备记录

      this.getAlarmTrendData() // 报警趋势
    },
    // 基本信息
    getBasicInfoData() {
      dashboardManageApi.getBasicInfo().then(ret => {
        this.basicInfoData = ret.data.data[0]
        const data = [
          {
            value: this.basicInfoData['告警']
          },
          {
            value: this.basicInfoData['隔离']
          },
          {
            value: this.basicInfoData['故障']
          },
          {
            value: this.basicInfoData['正常']
          },
          {
            value: this.basicInfoData['离线']
          }
          // {
          //   value: this.basicInfoData['未激活'],
          // },
        ]
        data.forEach((ele, idx) => {
          ele.name = this.basicInfoLegend[idx].name
          ele.color = this.basicInfoLegend[idx].color
        })
        this.basicInfoDataList = data

        this.updateBasicInfoChartOption()
      })
    },
    updateBasicInfoChartOption() {
      const data = this.basicInfoDataList
      const chartData = []
      data.forEach((ele, idx) => {
        chartData.push({
          name: ele.name,
          value: ele.value,
          itemStyle: {
            color: ele.color
          }
        })
      })
      var chartOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          top: '0%',
          left: 'center'
        },
        title: {
          text: this.basicInfoData['总数'],
          subtext: '监测点总数',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 24,
            lineHeight: 18
          },
          subtextStyle: {
            fontSize: 15
          },
          itemGap: 0,
          padding: [-20, 0, 0, 0]
        },
        series: [
          {
            // name: '监测',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: chartData
          }
        ]
      }
      this.createChart('keyA', chartOption)
    },

    // 传统消防设备
    getQuantityDeviceData() {
      dashboardManageApi.getQuantityDeviceData().then(ret => {
        const data = ret.data.data
        this.quantityStatisticsList.forEach((ele, idx) => {
          data.forEach((ele1, idx1) => {
            if (ele.label == ele1.gName) {
              ele.value = ele1.gCount1
            }
          })
        })
      })
    },

    // 设备类型
    getDictValueAttr() {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect'
      }
      deviceManageApi.getDictValueAttr(data).then(ret => {
        this.deviceDictionaries = ret.data.dictValue
        this.getEarlyWarningEventList() // 最新预警事件
      })
    },
    // 最新预警事件
    getEarlyWarningEventList() {
      const data = {
        pageNum: 1,
        pageSize: 10,
        field: 'alertTime',
        order: 'descending'
      }
      console.log('c ')
      dashboardManageApi.getEquipmentCollectAlert(data).then(ret => {
        this.earlyWarningEventList = ret.data.data.rows

        this.earlyWarningEventList.forEach((ele, i) => {
          this.deviceDictionaries.forEach((ele1, i1) => {
            if (Number(ele.deviceType) === ele1.dictValue) {
              ele.deviceTypeStr = ele1.dictText
            }
          })
        })
      })
    },

    // 告警统计
    getAlarmStatisticsData() {
      dashboardManageApi.getAlertFaultWOData().then(ret => {
        if (this.alarmStatisticsType == '今日告警') {
          this.alarmStatisticsObj = ret.data.data[1]
        } else {
          this.alarmStatisticsObj = ret.data.data[0]
        }

        const data = this.alarmStatisticsObj
        console.log('data', data)

        this.alarmStatisticsData = [
          {
            name: '未派单告警',
            value: data.gCount1
          },
          {
            name: '待处理告警',
            value: data.gCount2
          },
          {
            name: '已处理告警',
            value: data.gCount3
          }
        ]
        this.updateAlarmStatisticsChartOption()
      })
    },
    updateAlarmStatisticsChartOption() {
      const xAxisData = []
      const yAxisData = []
      this.alarmStatisticsData.forEach(ele => {
        xAxisData.push(ele.name)
        yAxisData.push(ele.value)
      })
      const colorStops = [
        [{ offset: 0, color: '#F46E65' }, { offset: 0.7, color: '#F1B5B4' }, { offset: 1, color: '#f3d8d7' }],
        [{ offset: 0, color: '#4684dc' }, { offset: 0.7, color: '#88C6FF' }, { offset: 1, color: '#c7e1f9' }],
        [{ offset: 0, color: '#4cb06a' }, { offset: 0.7, color: '#90CEA2' }, { offset: 1, color: '#d6f5df' }]
      ]
      const data = []
      xAxisData.forEach((ele, idx) => {
        const itemStyle = {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: colorStops[idx],
            globalCoord: false // 缺省为 false
          }
        }

        data.push({
          name: ele,
          value: yAxisData[idx],
          label: {
            normal: {
              show: true,
              // color: 'red',
              color: colorStops[idx][0].color,
              fontSize: 13,
              formatter: '{b}' + '\n' + '{c}({d}%)'
            }
          },
          itemStyle: itemStyle
        })
      })
      var chartOption = {
        tooltip: {
          trigger: 'item'
          // formatter: '{b}<br />' + seriesName + '：{c}%'
        },
        legend: {
          show: true,
          left: 'left',
          top: 5,
          padding: [5, 30, 0, 0],
          data: xAxisData,
          orient: 'vertical'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: 5, // 65 60 30
          containLabel: true
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '75%'], // ['23%', '45%'] 45%
            avoidLabelOverlap: false,
            labelLine: {
              show: true
            },
            data: data
          }
        ]
      }

      this.createChart('keyB', chartOption)
    },

    // 设备记录
    getDeviceRecordData() {
      dashboardManageApi.getDeviceRecord().then(ret => {
        const data = []
        ret.data.data.forEach((ele, idx) => {
          if (idx < 5) {
            data.push(ele)
          }
        })
        this.deviceRecordData = data

        this.updateDeviceRecordChartOption()
      })
    },
    updateDeviceRecordChartOption() {
      let arr = []
      this.deviceRecordData.forEach((ele, idx) => {
        let item = {
          barChart: '',
          id: 'id' + idx
        }
        arr.push(item)
      })
      this.deviceRecordChartList = arr

      this.$nextTick(() => {
        for (let i = 0; i < this.deviceRecordChartList.length; i++) {
          const data = [
            {
              value: this.deviceRecordData[i].warning
            },
            {
              value: this.deviceRecordData[i].isIsolate
            },
            {
              value: this.deviceRecordData[i].fault
            },
            {
              value: this.deviceRecordData[i].normal
            },
            {
              value: this.deviceRecordData[i].offLine
            }
            // {
            //   value: this.deviceRecordData[i].notActive,
            // },
          ]
          data.forEach((ele, idx) => {
            ele.name = this.basicInfoLegend[idx].name
            ele.color = this.basicInfoLegend[idx].color
          })
          const chartData = []
          data.forEach((ele, idx) => {
            chartData.push({
              name: ele.name,
              value: ele.value,
              itemStyle: {
                color: ele.color
              }
            })
          })
          let chartOption = {
            tooltip: {
              trigger: 'item'
              //  formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              show: false,
              top: '0%',
              left: 'center'
            },
            title: {
              text: this.deviceRecordData[i].total,
              subtext: this.deviceRecordData[i].name,
              left: 'center',
              top: 'center',
              textStyle: {
                fontSize: 20,
                lineHeight: 20
              },
              subtextStyle: {
                fontSize: 15
              },
              itemGap: 0,
              padding: [-50, 0, 0, 0]
            },
            series: [
              {
                name: this.deviceRecordData[i].name,
                type: 'pie',
                radius: ['70%', '90%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                labelLine: {
                  show: false
                },
                data: chartData
              }
            ]
          }

          this.createChart(this.deviceRecordChartList[i].id, chartOption)
        }
      })
    },

    // 报警趋势
    getAlarmTrendData() {
      dashboardManageApi.getAlertTrendData().then(ret => {
        const list = []
        ret.data.data.forEach(ele => {
          list.push({
            date: ele.gName,
            value1: ele.gCount1, // 告警
            value2: ele.gCount2 // 故障
          })
        })
        this.alarmTrendData = list
        this.updateAlarmTrendChartOption()
      })

      // var lastMonth = []
      // for (var i = 0; i < 10; i++) {
      //   lastMonth.unshift(
      //     new Date(new Date().setDate(new Date().getDate() - i)).getDate() +
      //       '号'
      //   )
      // }

      // const valueList1 = []
      // for (var i = 0; i < 10; i++) {
      //   valueList1.push(Math.round(Math.random() * 100))
      // }

      // const valueList2 = []
      // for (var i = 0; i < 10; i++) {
      //   valueList2.push(Math.round(Math.random() * 100))
      // }

      // const list = []
      // lastMonth.forEach((ele, idx) => {
      //   list.push({
      //     date: ele,
      //     value1: valueList1[idx],
      //     value2: valueList2[idx],
      //   })
      // })
      // this.alarmTrendData = list
      // this.updateAlarmTrendChartOption()
    },
    updateAlarmTrendChartOption() {
      var legendData = [
        {
          name: '告警',
          textStyle: {
            color: '#0063ED'
          },
          pageIconColor: '#0063ED',
          shadowColor: 'rgba(41, 123, 239, 0.77)'
        },
        {
          name: '故障',
          textStyle: {
            color: '#ff3e00'
          },
          pageIconColor: '#ff3e00',
          shadowColor: 'rgba(255, 62, 0, 0.77)'
        }
      ]
      var xAxisData = {
        xAxis: []
      }
      var yAxisData = {
        yAxis1: [],
        yAxis2: []
      }
      this.alarmTrendData.forEach((ele, idx) => {
        xAxisData.xAxis.push(ele.date)
        yAxisData.yAxis1.push(ele.value1)
        yAxisData.yAxis2.push(ele.value2)
      })

      var seriesData = []
      legendData.forEach((ele, idx) => {
        var key = 'yAxis' + (idx + 1)
        var itemData = yAxisData[key]

        seriesData.push({
          name: ele.name,
          type: 'line',
          data: itemData,
          smooth: true,
          lineStyle: {
            width: 2,
            shadowColor: ele.shadowColor,
            shadowBlur: 10,
            shadowOffsetX: 3,
            shadowOffsetY: 5
          },
          itemStyle: {
            color: ele.pageIconColor
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              color: ele.pageIconColor,
              distance: 2
            }
          }
        })
      })

      var chartOption = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {
          //   type: 'line',
          // },
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          },
          top: -10,
          right: 20
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '5%',
          top: '15%',
          containLabel: true
        },
        legend: {
          left: 'right',
          padding: [2, 10, 2, 10],
          data: legendData,
          itemHeight: 13
        },
        xAxis: {
          type: 'category',
          data: xAxisData.xAxis,
          // boundaryGap: true,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            fontSize: 15
            // rotate: '45'
          }
        },
        yAxis: [
          {
            type: 'value',
            min: 0,

            max: 'dataMax',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: seriesData
      }

      this.createChart('keyD', chartOption)
    },

    toClickType(text) {
      this.alarmStatisticsType = text
      this.getAlarmStatisticsData()
    },

    createChart(createId, option) {
      const charts = echarts.init(document.getElementById(createId))
      charts.setOption(option)
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },

    ChangeDecimalToPercentage(data) {
      if (data) {
        const data1 = (data * 100).toFixed(2) + '%'
        return data1
      } else {
        return '0.00%'
      }
    },
    getImgSrc(imgName) {
      return require(`@/assets/home/${imgName}`)
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  height: 100%;
  padding-top: 10px;
  // margin-bottom: 20px;
  // padding-right: 0px;
  .home-type-btn {
    position: relative;
    top: 8px;
    font-size: 20px;
    cursor: pointer;
  }

  .box-A {
    display: flex;
    margin-top: 3vh;
  }
  .box-A {
    display: flex;
    margin-top: 1.5vh;
  }
  .box-A-card {
    flex: 1;
    // height: 30vh;
    height: 250px;
    border-radius: 2px;

    background-color: #ffffff;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: 0.3s;

    padding: 15px 20px 20px 20px;
  }
  .box-A-title {
    border-left: 4px solid #5498de;
    margin-left: -20px;
    // margin-top: -8px;
  }
  .title-text {
    font-family: Microsoft YaHei;
    font-size: 1.8vh;
    font-weight: 400;
    color: #525252;
    margin-left: 0.6vw;
  }
  .title-right {
    padding-left: 1rem;
    display: flex;
    flex: 1;
  }
  .title-right-item {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .item-legend {
    width: 15px;
    height: 10px;
    background-color: #f34a4a;
    border-radius: 2px;
    margin-top: 2px;
    margin-right: 4px;
  }
  .box-A-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 8px 3px 8px 8px;
    height: 100%;

    width: calc(100% + 40px);
    border-top: 1px solid #eff2f5;
    margin-top: 8px;
    margin-left: -20px;
  }
  .A-left {
    flex: 1;
  }
  .A-right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    // padding: 8px 3px 8px 8px;
    // height: 100%;
  }
  .A-right-item {
    width: 32%;
    height: 45%;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
  }
  .A-right-item-btn {
    margin-bottom: 5px;
  }
  .btn-tag {
    padding: 0 8px;
    height: 26px;
    line-height: 24px;
  }
  .A-right-item-value {
    margin-bottom: 0px;
    font-size: 22px;
  }

  .box-A-right-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 8px 3px 8px 8px;
    height: 100%;

    width: calc(100% + 40px);
    border-top: 1px solid #eff2f5;
    margin-top: 8px;
    margin-left: -20px;
  }

  .box-A-right-content-item {
    width: 32%;
    // flex: 1;
    display: flex;
    justify-content: center;
    border-right: 1px solid #dbdcdd;
    .value-label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 0.3vw;
    }
    .value-text {
      font-family: Microsoft YaHei;
      font-size: 3.1vh;
      font-weight: bold;
    }
    .value-text-color-A {
      color: #3a8fea;
    }
    .value-text-color-B {
      color: #eb623b;
    }
    .value-text-color-C {
      color: #0facd5;
    }
    .unit-text {
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-weight: 400;
      margin-left: -5px;
    }
    .label-text {
      font-family: Microsoft YaHei;
      font-size: 1.4vh;
      font-weight: 400;
      color: #252631;
      // margin-top: -5px;
    }
  }
  .box-A-right-content-item:nth-child(3n) {
    border-right-width: 0px;
  }

  .box-B {
    display: flex;
    margin-top: 1.5vh;
  }
  .box-B-card {
    flex: 1;
    // height: 35vh;
    height: 320px;
    border-radius: 2px;

    background-color: #ffffff;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: 0.3s;

    padding: 15px 20px 20px 20px;
  }
  .box-B-content {
    display: flex;
    padding: 8px 3px 8px 8px;
    height: 100%;

    width: calc(100% + 40px);
    border-top: 1px solid #eff2f5;
    margin-top: 8px;
    margin-left: -20px;
  }

  /deep/ .el-table th.is-leaf:first-child,
  /deep/ .el-table td:first-child {
    border-left: 0px solid #dfe6ec;
  }

  /deep/ .el-table__body-wrapper {
    overflow-y: auto;
    position: relative;
    height: 85%;
  }
  /deep/ .el-table th {
    word-break: break-word; // color: rgba(0, 0, 0, .5);
    color: #909399;
    background-color: #e9eef5;
  }

  /deep/ .el-table th,
  /deep/ .el-table td {
    padding: 8px 1px;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }

  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #f9fcfd;
  }

  .btn-alarms-statistics {
    font-size: 13px;
    height: 28px;
    line-height: 26px;
    padding: 0px 12px;
  }
  .B-right-chart {
    flex: 1;
  }
  .B-right-describe {
    width: 180px;
    margin-right: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .B-right-describe-item {
    background: #f8f8f8;
    // height: 50px;
    border-left: 5px solid #ffa500;
    padding: 4px 8px;
    margin-bottom: 15px;
    line-height: 25px;
  }
  .B-right-describe-item-value {
    font-weight: bold;
    font-size: 17px;
  }
  .B-right-describe-item-label {
    font-size: 15px;
    margin-top: -5px;
  }

  .box-C {
    display: flex;
    margin-top: 1.5vh;
    // border: 1px solid red;
    // height: 15vh; //  750
    // height: calc(100% - 800px)
    height: calc(100% - 580px);
    min-height: 280px;
    padding-bottom: 10px;
  }
  .box-C-card {
    flex: 1;
    height: 100%;
    // height: 30vh;
    border-radius: 2px;

    background-color: #ffffff;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: 0.3s;

    padding: 15px 20px 20px 20px;
  }

  .box-C-content {
    display: flex;
    align-items: center;

    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-around;
    padding: 8px 3px 8px 8px;
    height: 100%;

    width: calc(100% + 40px);
    border-top: 1px solid #eff2f5;
    margin-top: 8px;
    margin-left: -20px;
  }
}
</style>
